<template>
    <div class="bottom">
        <img :src="playList[playListindex].al.picUrl" alt="" v-if="playList[playListindex]">
        <div class="name" @click="eject">
            <span  v-if="playList[playListindex]">{{playList[playListindex].name}}</span>
            <span>横滑切换上下首哦</span>
        </div>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 40px; height: 40px;right: 50px;position: absolute;"
          @click="play"
          v-if="zhangting"
        >
          <use xlink:href="#icon-bofang_o"></use>
        </svg>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 40px; height: 40px;right: 50px;position: absolute;"
          @click="play"
          v-else
        >
          <use xlink:href="#icon-zanting_o"></use>
        </svg>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 30px; height: 30px;right: 10px;position: absolute;"
        >
          <use xlink:href="#icon-danlieliebiao"></use>
        </svg>
        <van-popup v-model:show="show" position="bottom" :style="{ height: '100%',width:'100%' }"><Musicdetail :musiclist="playList[playListindex]" @getevent="getevent"/></van-popup>
    <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playList[playListindex].id}.mp3`" ></audio>
    </div>
</template>
<script>
import Musicdetail from '../Musicdetail.vue';
import { mapState} from 'vuex';
import {getMusicgc} from '@/request/api/music'
export default {
  components:{
     Musicdetail
  },
   data() {
      return {
        settimezt:''
      }
   },
   computed:{
    ...mapState(['playList','playListindex','zhangting','show','gechi','settime']),
   
   },
   methods:{
    play(){
        if(this.$refs.audio.paused)
        {//如果暂停则执行里面代码
        this.$refs.audio.play()
        this.$store.commit('seticon',false)
        // this.$store.state.zhangting=false
        console.log(this.$refs)
        this.settimezt=setInterval(()=>{
        this.$store.commit('Thesettime',this.$refs.audio.currentTime)
        },1000)
        // if(this.$refs.audio.currentTime>this.settime)
        // {
        //   this.$store.commit('Thesettime',0)
        // }
        }
        else
        {
            this.$refs.audio.pause()
            this.$store.commit('seticon',true)
            clearInterval(this.settimezt)
            // this.$store.state.zhangting=true
        }
    },
    getevent()
    {
      this.play()
    },
    eject(){
      this.$store.commit('bjshow',true)
    },
    addDuration()
    {
      this.$store.commit('upduration',this.$refs.audio.duration)
    }
   },
   watch:{
    playListindex(){
      // console.log(this.$store.state.tronls)
      this.$refs.audio.autoplay=true
      this.$store.commit('seticon',false)
      this.settimezt=setInterval(()=>{
        this.$store.commit('Thesettime',this.$refs.audio.currentTime)
        },1000)
        this.$store.commit('upduration',this.$refs.audio.duration)
        // this.$store.state.zhangting=false
        },
    playList(){ 
      this.$refs.audio.autoplay=true
      this.$store.commit('seticon',false)
      this.settimezt=setInterval(()=>{
        this.$store.commit('Thesettime',this.$refs.audio.currentTime)
        },1000)  
    } 
    },
   created(){
    getMusicgc(this.playList[this.playListindex].id).then(res=>{
        this.$store.commit('setgechi',res.data.lrc.lyric)
        // console.log(this.gechi)
      })
    },
    updated(){
      this.addDuration()
    }
   }
</script>
<style lang="less" scoped>
.bottom{
    width: 100%;
    height: 60px;
    background-color: #d8e6f2;
    // background-color: aqua;
    bottom:0;
    display: flex;
    align-items: center;
    position: fixed;
    .name{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 13px;
        color: #838385;
        left: 70px;
        align-items: flex-start;
        position: absolute;
        width: 210px;
    }

}
img{
    width: 40px;
    height: .8rem;
    border-radius: 30px;
    left: .3rem;
    position: absolute;
}
</style>
